import React from 'react';
import {GetColumnSearch} from '../http/Request'
import {SearchBar, ListView,Button} from 'antd-mobile';
import '../assets/css/ColumnSearch.module.css'
import ColumnSearchStyle from "../assets/css/ColumnSearch.module.css";


export default class ColumnSearch extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            searchValue: '',
            pageSize: 10,
            pageNum: 1,
            dataSource: dataSource, //列表的初始化
            isLoading: true,
            hasMore: false,
            list:[],
            noList: false
        };
    }

    componentDidMount() {
        this.getList();
    };

    /**
     * 获取列表
     * */
    getList() {
        let params = {
            "pageSize": this.state.pageSize,
            "pageNum": this.state.pageNum,
            "table": {
                leaveType: 1001,
                infoId: this.state.searchValue
            }
        };
        GetColumnSearch(params).then(res => {
            console.log(res)
            // eslint-disable-next-line react/no-direct-mutation-state
            if (res.body.total === 0) {
                this.setState({
                    hasMore: false,
                    isLoading: false
                })
            }

            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.pageNum++;
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.list = [...this.state.list, ...res.body.list];
            this.setState({
                list: this.state.list,
                dataSource: this.state.dataSource.cloneWithRows(this.state.list),
                isLoading: res.body.list.length === 0,
                // eslint-disable-next-line react/no-direct-mutation-state
                pageNum: this.state.pageNum,
            });
        }).catch(err => {

        });
    };

    /**
     * scroll滚动到底部执行方法
     * */
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.getList();
        this.setState({
            isLoading: true,
            noList: false
        });
    };

    /**
     * 获取搜索值
     * */
    getSearchValue(e) {
        this.setState({
            searchValue: e
        })
    }

    /**
     * 在栏-搜索
     * */
    searchList() {
        // eslint-disable-next-line react/no-direct-mutation-state
        this.state.pageNum = 1;
        this.setState({
            list: [],
            dataSource: this.state.dataSource.cloneWithRows({})
        });
        this.getList();
    }

    GoOutSlaughter  = (props) =>{

        this.props.history.push({
            pathname:'/OutSlaughterAddDetail/'+props
        })
    }

    GoDiseaseAdd  = (props) =>{
        this.props.history.push({
            pathname:'/DiseaseAdd/' + props
        })
    }

    render() {
        const row = (rowData, sectionID, rowID) => {

            return (

                <div key={rowID} className={ColumnSearchStyle.item}>
                    <div className={ColumnSearchStyle.timeBox}>
                        编号：{rowData.infoId}
                    </div>
                    <div className={ColumnSearchStyle.contentBox}>
                        <div className={ColumnSearchStyle.imgBox}>
                            <img src={rowData.enterImages} className={ColumnSearchStyle.cow_img} alt=""/>
                        </div>
                        <div className={ColumnSearchStyle.InfoBox}>
                            <div>
                                日期：{rowData.enterTime}
                            </div>
                            <div>
                                体重：{rowData.enterWeight}kg
                            </div>
                            <div>
                                价格：{rowData.enterPrice}¥
                            </div>
                        </div>
                        <div className={ColumnSearchStyle.Options} >
                            <Button onClick={() => this.GoOutSlaughter(rowData.infoId)}>
                                <svg  t="1618047580939" className={ColumnSearchStyle.icon} viewBox="0 0 1094 1024" version="1.1"
                                      xmlns="http://www.w3.org/2000/svg" p-id="1425" width="200" height="200">
                                    <path
                                        d="M141.241379 600.275862v176.551724h141.24138v-176.551724h70.620689v176.551724h141.24138v-176.551724h70.620689v176.551724h141.24138v-176.551724h70.620689v176.551724h141.24138v-176.551724h70.620689v176.551724h70.62069v70.62069h-70.62069v176.551724h-70.620689v-176.551724h-141.24138v176.551724h-70.620689v-176.551724h-141.24138v176.551724h-70.620689v-176.551724h-141.24138v176.551724H282.482759v-176.551724H141.241379v176.551724H70.62069v-176.551724H0v-70.62069h70.62069v-176.551724h70.620689zM776.827586 4.413793c58.509241 0 151.622621 70.867862 221.713655 156.354207 34.180414 41.701517 57.414621 81.072552 64.44138 113.487448 11.052138 50.776276-18.361379 87.640276-74.292966 87.640276l-15.924965 0.211862c-73.798621 2.048-138.946207 18.573241-195.937104 49.363862v128.459035h-70.620689v-168.712828l16.948965-10.310621c76.340966-46.503724 165.111172-69.632 265.533793-69.632l5.684966-0.105931-0.388414-1.906758c-3.848828-17.655172-19.809103-45.550345-44.279173-76.517517l-5.790896-7.203311C886.536828 135.556414 807.017931 75.034483 776.827586 75.034483c-30.084414 0-50.246621 12.641103-87.710896 50.882207l-18.961656 19.350069c-34.604138 34.568828-58.721103 52.435862-93.537103 64.617931-47.492414 16.595862-121.043862 18.820414-238.238897 12.535172l-7.909517-0.423724-131.425103-8.121379c-8.15669-0.423724-15.112828-0.812138-21.327448-1.059311l-16.666483-0.670896L138.557793 211.862069c-36.369655 0-55.825655 96.008828-35.663448 297.807448l2.824827 26.341517-70.196965 7.838897C5.896828 279.128276 31.673379 141.241379 138.557793 141.241379c12.570483 0 23.269517 0.176552 37.782069 0.776828l25.423448 1.306483 116.524138 7.23862 37.075862 2.01269c99.610483 4.872828 164.051862 2.507034 197.949793-9.357241 24.258207-8.474483 42.548966-22.845793 74.504828-55.578483l18.573241-18.891035C692.012138 23.58731 725.274483 4.413793 776.827586 4.413793z m219.171311 286.75531h-1.624276l0.247172 0.95338c0.176552 0.635586 0.317793 1.024 0.494345 1.129931l0.882759-2.083311z"
                                        p-id="1426" fill="#707070"></path>
                                </svg>
                            </Button>
                           <Button onClick={() => this.GoDiseaseAdd(rowData.infoId)}>
                               <svg t="1618047755502" className={ColumnSearchStyle.icon} viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3232" width="200" height="200">
                                   <path
                                       d="M512.796029 970.586145c-44.734264 0-86.786326-17.419924-118.419681-49.050083l-289.760894-289.760894c-65.296744-65.296744-65.296744-171.542618 0-236.836165L394.376348 105.178109c31.630158-31.633355 73.685417-49.050083 118.419681-49.050083s86.789523 17.419924 118.419681 49.050083l289.760894 289.760894c65.296744 65.296744 65.296744 171.542618 0 236.836165l-289.760894 289.760894c-31.630158 31.626961-73.685417 49.050083-118.419681 49.050083z m0-869.704674c-32.777846 0-63.592794 12.765234-86.770341 35.942781l-289.760895 289.760894c-47.84485 47.84485-47.84485 125.695832 0 173.543879l289.760895 289.760894c23.177547 23.177547 53.992495 35.94278 86.770341 35.942781s63.595991-12.765234 86.773538-35.942781l289.760894-289.760894c47.84485-47.84485 47.84485-125.695832 0-173.543879l-289.760894-289.760894c-23.177547-23.177547-53.995692-35.94278-86.773538-35.942781z"
                                       fill="#bfbfbf" p-id="3233"></path>
                                   <path
                                       d="M590.752509 778.231688h-151.654685a22.378321 22.378321 0 0 1-22.378321-22.378321v-137.898411H278.821092a22.378321 22.378321 0 0 1-22.378321-22.378321V443.921951a22.378321 22.378321 0 0 1 22.378321-22.378321h137.901608V283.645219a22.378321 22.378321 0 0 1 22.378321-22.378321h151.654684a22.378321 22.378321 0 0 1 22.378321 22.378321v137.898411h137.901608a22.378321 22.378321 0 0 1 22.378321 22.378321v151.654684a22.378321 22.378321 0 0 1-22.378321 22.378321H613.134026v137.898411a22.381518 22.381518 0 0 1-22.381517 22.378321z m-129.273167-44.756642h106.898042v-137.898411a22.378321 22.378321 0 0 1 22.378321-22.378321h137.901608V466.300272H590.755705a22.378321 22.378321 0 0 1-22.378321-22.378321V306.02354h-106.898042v137.898411a22.378321 22.378321 0 0 1-22.378321 22.378321H301.199413v106.898042h137.901608a22.378321 22.378321 0 0 1 22.378321 22.378321v137.898411z"
                                       fill="#bfbfbf" p-id="3234"></path>
                               </svg>
                           </Button>

                        </div>
                    </div>
                </div>
            );
        };



        return (
                <div>
                    <div className={'SearchBarStyle'}>
                        <SearchBar
                                placeholder="请输入编号"
                                value={this.state.searchValue}
                                cancelText={'搜索'}
                                onCancel={this.searchList.bind(this)}
                                onChange={this.getSearchValue.bind(this)}/>
                    </div>
                    <ListView
                            ref={el => this.lv = el}
                            dataSource={this.state.dataSource}
                            renderFooter={() => (
                                    <div style={{padding: 30, textAlign: 'center'}}>
                                        {
                                            this.state.noList ?
                                                    '暂无数据'
                                                    :
                                                    this.state.isLoading ? '加载中...' : '到底了'

                                        }
                                    </div>
                            )}
                            renderRow={row}
                            className="am-list"
                            pageSize={4}
                            useBodyScroll
                            onScroll={() => {
                                // console.log('scroll');
                            }}
                            scrollRenderAheadDistance={500}
                            initialListSize={10}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={1}/>
                </div>
        )
    }
}
